<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>UbiNote Home</title>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/ubi-editor.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/ubi-dialog.css" type="text/css" media="screen" />
<link rel="shortcut icon" href="/favicon.png" />
<script src="js/jquery.js"></script>
<script src="js/jquery-ui.js"></script>
<script src="js/jquery.layout.js"></script>
<script type="text/javascript" src="js/jquery.boxshadow.js"></script>
<script type="text/javascript" src="js/jquery.qtip.js"></script>
<script type="text/javascript" src="js/dragsort.js"></script>
<script type="text/javascript" src="js/ui.js"></script>
<script type="text/javascript" src="js/ui-update.js"></script>
<script type="text/javascript" src="js/ajax.js"></script>
<script type="text/javascript" src="js/bind.js"></script>
<script type="text/javascript" src="js/editor.js"></script>
<script type="text/javascript" src="js/ubi-dialog.js"></script>
<script type="text/javascript" src="js/sidebar.js"></script>
<script type="text/javascript" src="js/note-view.js"></script>
<script type="text/javascript" src="js/notebook-view.js"></script>
<script type="text/javascript" src="js/untility.js"></script>
<script>
    var layout_opts = {
		//	reference only - these options are NOT required because are already the 'default'
			closable:				true	// pane can open & close
		,	resizable:				true	// when open, pane can be resized 
		,	slidable:				true	// when closed, pane can 'slide' open over other panes - closes on mouse-out
        ,   paneClass: 'ui-layout-pane'
		,	north__slidable:		false	// OVERRIDE the pane-default of 'slidable=true'
        ,   north__spacing_open :    0
        ,   north__closable:    false
        ,   north__size:        50
		,   west__spacing_open: 0
        ,   west__spacing_closed: 0
        ,	west__minSize:		100
        ,   west__size:         100
        ,   north__paneSelector:    '#header-wrap'
        ,   west__paneSelector:    '#sidebar-wrap'
        ,   center__paneSelector:   '#center-wrap'
        ,   center__paneClass: 'ui-layout-pane'

    };
var global = {};
jQuery(function($) {
    global.layout = $('#out-wrap').layout(layout_opts);
    
    $('#tabs').tabs({ panelTemplate: form_note_view()});
    $('#tabs').bind('tabsselect', function(event, ui) {
        if ($(ui.panel).hasClass('.note-view')) {
            switch_toolbar('#note-view-bar', true);
        } else if ($(ui.panel).hasClass('.notebook-view')) {
            switch_toolbar('#notebook-view-bar', true);
        }
    });
    $('#show-all-tags-btn').click(function () {
        get_tag_list_do(-1,
        function (state, data) {
            var tags = data;
            var tags_array = new Array();
            var min_count, max_count;
            max_count = tags[0].count;
            min_count = tags[tags.length-1].count;
            tags_array.push('<p id="all-tag-content">')
            var count2size = function (x) { 
                return 12 / (max_count-min_count) * x + (12-2*max_count/(max_count-min_count))
            }
            for (var i = 0; i < tags.length; i += 1) {   
                tags_array.push(
                    ' <a id="'+ tags[i].id + '_all-tag-item" class="tag-item" href="#"  style="font-size:' + count2size(tags[i].count)+ 'px;" '
                    + 'title="' + tags[i].name + ': tagged by '+tags[i].count+' notes">' + tags[i].name + '</a> ');
            }
            tags_array.push('</p>');
            global.dialog.set_content(tags_array.join(''));
            var h = global.dialog.h - 50;   
            $('#all-tag-content').css('height', h + 'px');
            
            //bind actions
        },
        function (state, data) {
            notify('Load tag list fail');  
        });

        global.layout.toggle('west');
        global.dialog.set_size($(window).width()-75,$(window).height()-100);
        global.dialog.set_pos('55px','35px');
        global.dialog.show();
    });
    
    //note-view-toolbar
    $('#note-view-close-btn').click(function() {
        global.open_notes[global.crr_note_id].save_status();
        // crrent selected tab
        var selected = $('#tabs').tabs('option', 'selected'); 
        $('#tabs').tabs('remove', selected);
        delete global.open_notes[global.crr_note_id];
        global.crr_note_id = -1;
        $('#tabs').tabs('select', '#notebook-view');
    });
    $('#block-new-btn').click(function () {
        global.open_notes[global.crr_note_id].add_block('');
    });

    $('#pd-close-dialog-btn').click(function () {
        $('#pop-dialog').hide(); 
        $('#mask-layout').hide();
    });

    $('#filter').keypress(function (event) {
        if (event.keyCode != 13) {
            return true;
        }
        var filter_text = $('#filter').attr('value');
        apply_filter(filter_text);
    }).focus(function () {
        if ($(this).attr('value') == global.filter_default_str) 
            $(this).attr('value', '');
    }).blur(function () {
        if ($(this).attr('value').length == 0) 
            $(this).attr('value', global.filter_default_str);
    }).load(function () {
        $(this).attr('value', global.filter_default_str);
    });

    $('#filter-clear-btn').click(function(){
        $('#filter').attr('value', '');
        apply_filter('');
    });


    $('#clip-stack-btn').click (function () {
        $(this).toggleClass('btn-active');
        $('#clip-stack').toggle();
    }).click();
    $(window).click(
        function (){
            if (global.ue.status == "open") {
                global.ue.save_content();
                global.ue.close();
                global.note_status = 2;
                switch_toolbar('#note-view-bar');
            } 
            if ($('.note-item-title-replacement').length!=0) {
                var value = $('.note-item-title-replacement').attr('value');
                var id = $($('.note-item-title-replacement')
                    .parents('.note-item')[0]).attr('id').toString().split('_')[0];
                notebook_view.rename_note(id, value)

            }
            return false;
    }).keypress(
        function (event) {
            if (event.keyCode == 120) {
                global.layout.toggle('west');
            }
            if (event.charCode == 47) {
                $('#untility-bar').toggle();
                $('#filter-box').focus();
                return false;
            }
    });
    global.ue = new ubi_editor(1);
    global.ue.create_edit_bar('#note-edit-bar');
    global.dialog = new ubi_dialog(1);
    global.open_notes = {}
    //update_block_list_do(0);
    sidebar.init();
    notebook_view.init();
    switch_toolbar('#notebook-view-bar', true);
    $('.out-frame').boxShadow(0, 0, 15, '#222');
    //.boxShadow(0, 0, 15, '#222');
     

    //init
    global.modified_block_ids = {};
    global.crr_note_id = -1;
    global.crr_note_title = '';
    global.crr_page = 0;
    global.crr_block_id = -1;
    global.note_status = 0;
    global.filter_default_str = 'type keywords and press ENTER';
    global.options = {}
    global.options.collapse_sidebar = false;
});

</script>
</head>
<body>
<div id="out-wrap">
    <div id="header-wrap" >
    <div id="header"  class="out-frame">
        <div id="title"></div>
        <div id="tool-bars">
            <div id="search-bar">
                <input id="search-box"></input>
                <input id="search-btn" type="button"></input>
            </div>
            <div id="note-edit-bar" class="tool-bar" style="display:none;">
                <div id="note-edit-bar-btns"></div> <!--edit bar btns-->
            </div> <!-- format bar-->
            <div id="notebook-view-bar" class="tool-bar">
                <div id="notebook-view-bar-right" class="float-right">
                    <div id="note-new-btn-wrap" class="btn-base">
                    <input id="note-new-btn" type="button" class="btn-hlight"></input>
                    </div>
                </div>
                <div class="float-fix"></div>
            </div>
            <div id="note-view-bar" class="tool-bar">
                <div id="note-view-bar-btns">
                    <span id="note-view-close-btn-wrap" 
                        class="btn-base">
                        <a id="note-view-close-btn" title="Save and Close this notebook."
                            href="#" class="btn-hlight"></a>
                    </span>
                    <span id="block-new-btn-wrap" 
                        class="btn-base">
                        <a id="block-new-btn" title="create a new block"
                            href="#" class="btn-hlight"></a>
                    </span>
                    <span id="more-actions-btn-wrap" 
                        class="btn-base">
                        <a id="more-actions-btn" title="More Actions"
                            href="#" class="btn-hlight"></a>
                    </span>
                </div>
            </div>
        </div>
    </div><!--header -->
    </div>

    <div id="sidebar-wrap">
        <div id="sidebar" class="in-frame">
                <div id="show-all-tags-btn-wrap" style="float: right;" class="btn-base">
                    <a href="#" class="btn-hlight" id="show-all-tags-btn"></a>
                </div>
                <div id="tag-block-content">
                All labels lies here
                </div>
        </div>
    </div><!--sidebar-->

    <div id="center-wrap" >
        <div id="content-wrap"  class="out-frame">
        <!--
        <div id="content-blight-left" class="in-frame-left"></div>
        <div id="content-blight-right" class="in-frame-right"></div>
        -->
        <div id="content" class="in-frame">
            <div class="in-frame-header-left"></div>
            <div class="in-frame-header-right"></div>
            <div id="tabs">
                <ul class="in-frame-header">
                    <li><a href="#start-page"><img src="imgs/icons/16x16/home.png"></img></a></li>
                    <li><a href="#notebook-view"><img src="imgs/icons/16x16/notebook.png"></img></a></li>

                    <li><a href="#note-view"><span>Note</span></a></li>
                    <li><a href="#search-result-view"><span>Result</span></a></li>
                </ul>
                <div class="float-fix"></div>
                <div id="start-page" class="content-view start-page">
                    <div id="start-page-content">
                        <div id="start-page-nav">
                        <div id="entry-top" class="entry">
                            <img src="imgs/icons/72x72/album.png" class="entry-icon"></img>
                            <a id="label-top" class="label" href="#">Album</a>
                        </div>
                        <div id="entry-lefttop" class="entry">
                            <img src="imgs/icons/72x72/news.png" class="entry-icon"></img>
                            <a id="label-lefttop" class="label" href="#">News</a>
                        </div>
                        <div id="entry-righttop" class="entry">
                            <img src="imgs/icons/72x72/video.png" class="entry-icon"></img>
                            <a id="label-righttop" class="label" href="#">Videos</a>
                        </div>
                        <div id="entry-leftbottom" class="entry">
                            <img src="imgs/icons/72x72/lab.png" class="entry-icon"></img>
                            <a id="label-leftbottom" class="label" href="#">Product</a>
                        </div>
                        <div id="entry-rightbottom" class="entry">
                            <img src="imgs/icons/72x72/forum.png" class="entry-icon"></img>
                            <a id="label-rightbottom" class="label" href="#">Forum</a>
                        </div>
                        <div id="entry-bottom"  class="entry">
                            <img src="imgs/icons/72x72/album.png" class="entry-icon"></img>
                            <a id="label-bottom" class="label" href="#">About Us</a>
                        </div>
                        <div id="entry-center" class="entry">
                            <img src="imgs/icons/72x72/home.png" class="entry-icon"></img>
                            <a id="label-center" class="label" href="#">Enter Website</a>
                        </div>    
                        </div> <!-- start page nav-->
                    </div>
                </div> <!-- start page-->
                
                <div id="notebook-view" class="content-view notebook-view">
                    <div id="notebook-view-content"></div>
                </div> <!-- notebook view -->
                
                <div id="note-view" class="content-view ">
                    <div id="note-view-header" class="in-frame">
                        <div id="note-sys-bar">
                            <span id="note-view-close-btn-wrap" 
                                class="btn-base">
                                <a id="note-view-close-btn" title="Save and Close this notebook."
                                    href="#" class="btn-hlight"></a>
                            </span>
                            <span id="block-new-btn-wrap" 
                                class="btn-base">
                                <a id="block-new-btn" title="create a new block"
                                    href="#" class="btn-hlight"></a>
                            </span>
                            <span id="more-actions-btn-wrap" 
                                class="btn-base">
                                <a id="more-actions-btn" title="More Actions"
                                    href="#" class="btn-hlight"></a>
                            </span>
                        </div>
                        <div id="note-title-bar">
                            <span id="note-title"></span>
                        </div>
                    </div><!--note-view-header -->
                    <div id="note-view-content"></div>
                </div> <!--note-view-->

                <div id="search-result-view" class="content-view">Search result here</div> 
            </div><!--tabs-->
        </div>
        </div>
    </div>

    </div><!--center-->
</div>
</div>
<div id="untility-bar" class="out-frame">
    <div id="filter-box" >
        <span class="label">Filter: </span> 
        <input type="text" id="filter"></input> 
        <input type="button" id="filter-clear-btn" title="clear the filter"></input>
    </div>
    <div id="tray"></div>
</div>

</body>
</html>

